<template>
	<view class="content">
		<view>
			<view class="userHeader" :style="'background-color: '+color">
			  <image src="../../static/user-bg.png" class="user_bg"></image>
			  <view class="nav">
			      <view class="user" @click="bindLogin" :hover-class="!hasLogin ? 'logo-hover' : ''">
			        <image :src="avatarUrl" v-if="avatarUrl" mode="aspectFill"></image>
					<image src="../../static/avatar.png" v-else></image>
			        <text>{{name || '登录'}}</text>
			      </view>
			  </view>
			  <view class="vip"v-if="hasLogin">
			        <image src="../../static/vip-card.png" class="vip_bg"></image>
			        <view class="vipname">
			          <text class="names">
			            会员
			          </text>
			          <text class="vip_level">等级</text>
			        </view>
			        <view class="banquan">
			         
			        </view>
			   </view>
			</view> 
		</view>
		<view class="userMenu" >
			<image src="../../static/arc.png" class="arc"></image>
			<zetank-wode-cell :colors="color" icons="file-text-fill" :rightshow="false" :menudata='menudata'>我的学习</zetank-wode-cell>
			<zetank-wode-server :colors="color" icons="grid-fill" :rightshow="false" :serverList="serverList" >我的服务</zetank-wode-server>
			<zetank-wode-server :colors="color" icons="grid-fill" :rightshow="false" :serverList="serverList" >我的服务</zetank-wode-server>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props:{
			avatarUrl:{
				typr:String
			},
			name:{
				typr:String
			},
			menudata:{
				type:Array,
				default:function(){
					return [{title:'标题一',num:0,url:''},{title:'标题二',num:0,url:''},{title:'标题三',num:0,url:''}]
				}
			},
			serverList:{
				type:Array,
				default:function(){
					return [
						{
							name: '我的信息',
							icon: 'setting-fill',
							url: '',
							id: 0,
							elseUrl: ''
						},
						{
							name: '我的信息',
							icon: 'setting-fill',
							url: '',
							id: 0,
							elseUrl: ''
						},
						{
							name: '我的信息',
							icon: 'setting-fill',
							url: '',
							id: 0,
							elseUrl: ''
						},
						{
							name: '我的信息',
							icon: 'setting-fill',
							url: '',
							id: 0,
							elseUrl: ''
						},
					]
				}
			},
			color:{
				type:String,
				default:"#4baed5"
			}
		},
		computed:{
			hasLogin(){
				return true
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #f8f8f8;	
	}
	
	page {
		background-color: #f8f8f8;
		height: 100%;
	}

	.userHeader {
	  height: 520upx;
	  width: 100%;
	  position: relative;
	  padding: 50upx 4%;
	}
	
	.userHeader .user_bg {
	  height: 100%;
	  width: 100%;
	  display: block;
	  position: absolute;
	  top: 0;
	  left: 0;
	}
	
	.userHeader .nav {
	  height: 180upx;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	.user {
	  display: flex;
	  -webkit-box-align: center;
	  -webkit-align-items: center;
	  align-items: center;
	  overflow: hidden;
	  z-index: 200;
	}
	
	.user image {
	  width: 130upx;
	  height: 130upx;
	  border: 5upx solid #fff;
	  border-radius: 50%;
	}
	
	.user text {
	  font-size: 38upx;
	  color: #fff;
	  margin-left: 20upx;
	}
	.vip {
	  height: 240upx;
	  position: relative;
	  display: flex;
	  padding: 20upx 24upx;
	  border-radius: 16upx 16upx 0 0;
	  width: 100%;
	  overflow: hidden;
	  margin-top: 10upx;
	}
	
	.banquan {
	  position: absolute;
	  color: #f6e5a3;
	  top: 100upx;
	  left: 24upx;
	  font-size: 24upx;
	}
	
	.vip .vip_bg {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
	}
	
	.vipname {
	  z-index: 5;
	  display: flex;
	  width: 100%;
	  height: 60upx;
	  position: relative;
	  align-items: center;
	}
	
	
	
	.vipname .names {
		/* background: #F1F1F1; */
		height: 45upx;
	  color: #ffffff;
	  line-height: 45upx;
	  padding:0 0upx;
	  font-size: 25upx;
	  margin-left: 10upx;
	  text-align: center;
	   border-radius: 20upx;
	   font-weight: 500;
	}
	
	.vip_level {
	  width: 125upx;
	  height: 48upx;
	  text-align: center;
	  line-height: 48upx;
	  font-size: 25upx;
	  color: #ffffff;
	  background: linear-gradient(270deg, #f5991e, #f5991e);
	  border-radius: 8upx;
	  position: absolute;
	  top: 5upx;
	  right: 10upx;
	  font-weight: 550;
	}
	/* 中间菜单栏 */
	.userMenu {
	  margin-top: -168upx;
	  padding: 0 4%;
	  position: relative;
	  background-color: #f8f8f8;
	  padding-bottom: 10upx;
	}
	
	.userMenu .arc {
	  width: 100%;
	  height: 36upx;
	  position: absolute;
	  top: -34upx;
	  left: 0;
	}
	.place{
		padding: 0 4%;
		position: relative;
		background-color: #f8f8f8;
		padding-bottom: 40upx;
	}
</style>
